<template>
  <div id="setting">
    <div style="padding: 10px;display: flex;justify-content: space-between;">
      <el-button type="success" icon="Plus" @click="OpenAddDlg()" size="default">新增</el-button>
      <div>
        <el-input v-model="page.value" style="width: 240px" placeholder="输入敏感词" @clear="clearSearch()" clearable />
        <el-button style="margin-left: 10px;" type="primary" icon="Search" @click="search()" size="default">查询</el-button>
      </div>
    </div>
    <div class="settingList">
      <el-table id="out" border :data="SenstiveList" stripe style="width: 100%" height="675">
        <el-table-column align="center" type="index" label="序号" width="60" />
        <!-- <el-table-column align="center" label="是否在线" width="100">
          <template #default="scope">
            <img :src="scope.row.online == 1 ? '/img/zx_ico.png' : '/img/zx_icol.png'" alt="">
          </template>
</el-table-column> -->
        <el-table-column label="敏感字" width="120">
          <template #default="scope">
            <div>{{ f_GetJM(scope.row.value) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="200">
          <template #default="scope">
            <div>{{ scope.row.gmt_create }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <div>
              <el-button size="default" type="primary" icon="Menu" @click="changeBoard(scope.row)">修改</el-button>
              <el-button size="default" type="danger" icon="DeleteFilled" @click="DelBoard(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination style="margin-top: 10px;" @sendsize="getsize" @sendpage="getpage" :page="page"></pagination>
    </div>
    <el-dialog v-model="DeviceDlg" :title="SenstiveTitle" width="650" :before-close="cancelDlg">
      <div class="addDevice">
        <el-form :inline="true" :model="SenstiveForm" label-width="100" class="demo-form-inline">
          <div>
            <el-form-item label="敏感字">
              <el-input style="width: 430px !important;" v-model="SenstiveForm.value" placeholder="请输入敏感字" />
            </el-form-item>
          </div>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelDlg()" icon="Close" type="info">取消</el-button>
          <el-button type="primary" icon="Check" @click="sureEditDevice()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import $sys from '../../api/sys';
import { ElMessage, ElMessageBox } from 'element-plus';
import { mainStore } from "../../store/index";
import { useRouter } from 'vue-router';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import pagination from '../../components/pagination.vue';
const $router = useRouter();
const $store = mainStore();
const SenstiveList = ref([]);
const DeviceDlg = ref(false);
const SenstiveTitle = ref('添加敏感字');
const SenstiveForm = ref({
  direction: '0',
  hw_code: 'S98',
  factory: 'sunway',
  model: 'f'
});

function f_GetJM(strVal){
  //console.log(111,str);
   var res=""; 
   if(strVal.length>=2){
      var hd=strVal.substr(0,1);
      res=hd+f_GetN(strVal.length-1);
   }
   return res;
}

function f_GetN(len){
  var res="";
  for(var i=0;i<len;i++){
    res=res+"*"
  }
  return res;
}

function f_GetZH(zh) {
  var m_zh = parseInt(zh);
  if (zh - m_zh == 0) {
    return "K" + m_zh + "+000";
  }
  else {
    var bmz = parseInt((zh - m_zh) * 1000) + "";
    if (bmz.length == 1) {
      bmz = "00" + bmz;
    }
    else if (bmz.length == 2) {
      bmz = "0" + bmz;
    }
    return "K" + m_zh + "+" + bmz;
  }
}
function initSenstiveForm() {
  SenstiveForm.value.value = '';
}
function OpenAddDlg() {
  SenstiveTitle.value = '添加敏感字';
  DeviceDlg.value = true;
}
onMounted(() => {
  getSenstiveList();
})
function changeBoard(e) {
  SenstiveTitle.value = '修改敏感字';
  $sys.getSenstiveByID(e.id).then(res => {
    if (res.code == 200) {
      SenstiveForm.value = res.data;
      DeviceDlg.value = true;
    }
  })
}
function DelBoard(e) {
  ElMessageBox.confirm(
    `确定删除该敏感字吗?`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    $sys.DelSenstive(e.id).then(res => {
      if (res.code == 200) {
        ElMessage({
          message: '删除成功!',
          type: 'success'
        })
        getSenstiveList();
      }
    })
  })
}
function sureEditDevice() {
  if (checkSenstiveForm()) {
    if (SenstiveTitle.value == '添加敏感字') {
      $sys.addSensitive(SenstiveForm.value).then(res => {
        if (res.code == 200) {
          ElMessage({
            message: '添加成功!',
            type: 'success'
          })
          cancelDlg();
          getSenstiveList();
        }
      })
    } else {
      $sys.updateSenstive(SenstiveForm.value).then(res => {
        if (res.code == 200) {
          ElMessage({
            message: '修改成功!',
            type: 'success'
          })
          cancelDlg();
          getSenstiveList();
        }
      })
    }
  }
}
function cancelDlg() {
  for (let key in SenstiveForm.value) {
    SenstiveForm.value[key] = '';
    DeviceDlg.value = false;
  }
  initSenstiveForm();
}
const page = reactive({
  value:'',
  pagenum: 1,
  pagesize: 20,
  total: 0
})
function search(){
  page.pagenum = 1;
  page.pagesize=20;
  getSenstiveList();
}
function clearSearch(){
  page.value='';
  page.pagenum = 1;
  page.pagesize=20;
  getSenstiveList();
}
function getsize(e) {
  page.pagesize = e;
  getSenstiveList();
}
function getpage(e) {
  page.pagenum = e;
  getSenstiveList();
}
function getSenstiveList() {
  $sys.getSenstiveList(page).then(res => {
    if (res.code == 200) {
      page.total = res.data.count;
      SenstiveList.value = res.data.result;
    }
  })
}
function checkSenstiveForm() {
  let flag = false;
  if (!SenstiveForm.value.value || SenstiveForm.value.value == '') {
    ElMessage({
      message: '敏感字内容不能为空!',
      type: 'warning'
    })
    flag = false;
  } else {
    flag = true;
  }
  return flag;
}
</script>

<style scoped>
:deep(*) {
  font-size: 16px;
}

#setting {
  /* height: calc(100vh - 135px); */
  /* height: 100%; */
  background-color: #2F4052;
  padding: 10px;
}

:deep(.el-input__wrapper),
:deep(.el-textarea__inner),
:deep(.el-select__wrapper) {
  background-color: #34475b !important;
  border: 1px solid #2b3b4b !important;
  box-shadow: none !important;

}

:deep(.el-input__inner),
:deep(.el-textarea__inner),
:deep(.el-select__placeholder) {
  color: #ccc !important;
}

:deep(.el-form-item__label) {
  color: white;
}

:deep(.addDevice .el-select) {
  width: 150px !important;
}

:deep(.el-scrollbar__wrap--hidden-default) {
  background-color: #2F4052;
}

:deep(.addDevice .el-input) {
  width: 150px !important;
}

:deep(.el-dialog) {
  background-color: #2F4052 !important;
}

:deep(.el-dialog__title),
:deep(.el-dialog__body) {
  color: white !important;
}

:deep(.settingList .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
  background: none;
}

:deep(.settingList .el-table__inner-wrapper) {
  &::before {
    display: none;
  }
}

:deep(.settingList .el-table__header-wrapper th) {
  background-color: #2F4052;
  color: #fff;
}

:deep(.settingList .el-table__row) {
  background-color: #2F4052;
  color: #B2C9EE;
}



:deep(.settingList .el-table--enable-row-hover .el-table__body tr:hover:nth-child(even)>td) {
  background-color: #263343 !important;
}

:deep(.settingList .el-table--enable-row-hover .el-table__body tr:hover:nth-child(odd)>td) {
  background-color: #2F4052 !important;
}

:deep(.settingList .el-table__body tr:nth-child(even)) {
  background-color: #263343;
}

:deep(.settingList .el-table--fit .el-table__inner-wrapper:before) {
  display: none !important;
}

:deep(.el-table__cell) {
  border: 1 !important;
  border-color: #263342;
}

:deep(.el-table--border .el-table__inner-wrapper:after),
:deep(.el-table--border:after),
:deep(.el-table__border-left-patch) {
  background-color: #263342;
}

.settingList {
  /* padding: 10px; */
  background-color: #2F4052;
  /* height: 700px; */
  overflow: auto;
  width: 100%;
}

.settingList::-webkit-scrollbar {
  width: 5px;
}

.settingList::-webkit-scrollbar-thumb {
  background-color: #ccc;
  /* 设置滚动条的颜色 */
  border-radius: 6px;
  /* 设置滚动条的圆角 */
}

.settingList::-webkit-scrollbar-track {
  background-color: #888;
  border-radius: 6px;
  /* 设置滚动条的轨道颜色 */
}
</style>

<style lang='less'>
.el-message-box {
  background-color: #2f4052 !important;
}

.el-message-box__message,
.el-message-box__title {
  color: #fff;

}

#setting {
  .el-button>span {
    font-size: 14px !important;
  }

  .el-table__cell {
    border: 1 !important;
    border-color: #222e3b;
  }


  .el-scrollbar {}

  // .el-scrollbar__wrap{height: calc(100vh - 240px);}
}
</style>